<template>
  <view class="content">
    <!--
    <view class="top1"></view>
    <view class="top">
      <view style="width: 18rpx;height: 32rpx; margin-left: 25rpx;" @click="backBefore">
        <image src="../../static/back.png" style="width: 100%;height: 100%;"></image>
      </view>
      <view style="margin-left: 240rpx;">我的团队</view>
    </view>
    -->
    <view style="display: flex;justify-content: center;align-items: center;">
      <view class="user">
        <view class="user_img">
          <image :src="userImg" style="width: 100%;height: 100%;border-radius: 60rpx;"></image>
        </view>
        <view class="user_txt">用户：{{ curUser.nickName }}</view>
        <view class="user_i" v-show='cyType'>
          <view class="user_icon">
            <image src="../../static/chuangye.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="user_icon_desc">创业</view>
        </view>
        <view class="user_i" v-show='dsType'>
          <view class="user_icon">
            <image src="../../static/dongshi_i.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="user_icon_desc">董事</view>
        </view>
        <view class="user_i" v-show='gfType'>
          <view class="user_icon">
            <image src="../../static/guanfang.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="user_icon_desc">官方</view>
        </view>
      </view>
    </view>
    <!-- 我的团队详细信息 -->
    <view class="team">
      <view class="my_tuijian">
        <view class="tuijian_area">
          <view class="tuijian_icon">
            <image src="../../static/tuijian_icon.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="tuijian_txt">{{ myUpLevel }}</view>
        </view>
        <view class="tuijian_info">
          <view class="up_people">
            <image src="../../static/up_people.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view style="font-size: 34rpx;font-weight: 550;margin-left: 20rpx;">{{ teams.parentNickName }}</view>
          <view style="width: 82rpx;height: 28rpx;margin-left: 10rpx;">
            <image src="../../static/tuijr.png" style="width: 100%;height: 100%;"></image>
          </view>
        </view>
      </view>

      <view v-if="isShowDownLevel">
        <!-- 我的下级 -->

        <view class="tuijian_area">
          <view class="tuijian_icon">
            <image src="../../static/tuijian_icon.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="tuijian_txt">我的下级</view>
          <view style="font-size: 34rpx;font-weight: 550;margin-left: 20rpx;color: red;">
            {{ teams.chuangyeNum + teams.guanfangNum }}
          </view>
        </view>

        <!--官方卡片-->
        <view>
          <view @click="guanfangClick">
            <!-- 官方收起 -->
            <view v-if="guanfangExt">
              <view class="guanfang_desc">
                <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                  <image src="../../static/sanjiao.png" style="width: 100%;height: 100%;">
                  </image>
                </view>
                <view
                    style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: #a93a0c">
                  官方
                </view>
                <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 320rpx;">
                  官方代理数 {{ teams.guanfangNum }}
                </view>
              </view>
            </view>
            <view v-if="!guanfangExt">
              <!-- 官方展开 -->
              <view class="guan">
                <view class="guanfang_desc">
                  <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                    <image src="../../static/sanjiaoxia.png" style="width: 100%;height: 100%;">
                    </image>
                  </view>
                  <view
                      style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: #a93a0c">
                    官方
                  </view>
                  <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 320rpx;">
                    官方代理数 {{ teams.guanfangNum }}
                  </view>
                </view>
                <view v-for="(item, index) in teams.guanfangs" :key="item.id">
                  <view class="guanfang_info">
                    <view style="width: 72rpx;height: 72rpx;margin-left: 10rpx;">
                      <image src="../../static/guanfang_user.png"
                             style="width: 100%;height: 100%;">
                      </image>
                    </view>
                    <view style="font-size: 36rpx;font-weight: 500;margin-left: 30rpx;color: black">
                      {{ item.nickName }}
                    </view>
                    <view style="width:72rpx; height: 28rpx;margin-left: 10rpx;">
                      <image src="../../static/guanfang_icon.png"
                             style="width: 100%;height: 100%;">
                      </image>
                    </view>
                  </view>
                  <!-- 官方下的创业 关闭状态 -->
                  <view v-for="(item, index) in item.cyext" :key="item.id">
                    <view class="guanfang_info">
                      <view style="width: 72rpx;height: 72rpx;margin-left: 50rpx;">
                        <image src="../../static/guanfang_user.png"
                               style="width: 100%;height: 100%;">
                        </image>
                      </view>
                      <view style="font-size: 36rpx;font-weight: 500;margin-left: 30rpx;color: black">
                        {{ item.nickName }}
                      </view>
                      <view style="width:72rpx; height: 28rpx;margin-left: 10rpx;">
                        <image src="../../static/chuangye_icon.png"
                               style="width: 100%;height: 100%;">
                        </image>
                      </view>
                    </view>
                  </view>
                  <!-- 官方下的创业 关闭状态 结束-->
                  <!-- 官方下的创业 打开状态 开始-->
                  <view v-for="(item, index) in item.cyext" :key="item.id">
                    <view class="guanfang_info">
                      <view style="width: 72rpx;height: 72rpx;margin-left: 50rpx;">
                        <image src="../../static/guanfang_user.png"
                               style="width: 100%;height: 100%;">
                        </image>
                      </view>
                      <view style="font-size: 36rpx;font-weight: 500;margin-left: 30rpx;color: black">
                        {{ item.nickName }}
                      </view>
                      <view style="width:72rpx; height: 28rpx;margin-left: 10rpx;">
                        <image src="../../static/chuangye_icon.png"
                               style="width: 100%;height: 100%;">
                        </image>
                      </view>
                    </view>
                  </view>
                  <!-- 官方下的创业 打开状态 结束-->
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--官方卡片-->

        <!--创业卡片-->
        <view>
          <view @click="chuangyeClick">
            <!-- 创业收起 -->
            <view v-if="chuangyeExt">
              <view class="guanfang">
                <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                  <image src="../../static/sanjiao.png" style="width: 100%;height: 100%;"></image>
                </view>
                <view
                    style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: #38498e">
                  创业
                </view>
                <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 320rpx;">
                  创业代理数 {{ teams.chuangyeNum }}
                </view>
              </view>
            </view>
            <view v-if="!chuangyeExt">
              <!-- 创业展开 -->
              <view class="guan">
                <view class="guanfang_desc">
                  <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                    <image src="../../static/sanjiaoxia.png" style="width: 100%;height: 100%;">
                    </image>
                  </view>
                  <view
                      style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: #38498e">
                    创业
                  </view>
                  <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 320rpx;">
                    创业代理数 {{ teams.chuangyeNum }}
                  </view>
                </view>
                <view v-for="(item, index) in teams.chuangyes" :key="item.id">
                  <view class="guanfang_info">
                    <view style="width: 72rpx;height: 72rpx;margin-left: 10rpx;">
                      <image src="../../static/guanfang_user.png"
                             style="width: 100%;height: 100%;">
                      </image>
                    </view>
                    <view style="font-size: 36rpx;font-weight: 500;margin-left: 30rpx;color: black">
                      {{ item.nickName }}
                    </view>
                    <view style="width:72rpx; height: 28rpx;margin-left: 10rpx;">
                      <image src="../../static/chuangye_icon.png"
                             style="width: 100%;height: 100%;">
                      </image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--创业卡片-->
      </view>
    </view>

  </view>
</template>

<script>
import config from '../../utils/config.js'
import {
  checkLogin
} from '../../utils/common.js'

export default {
  data() {
    return {
      showOverlay: false, // 控制遮罩层显示的变量
      chuangyeExt: true,
      guanfangExt: true,
      goodsList: ['1'],
      curUser: null,
      teams: null,
      cyType: false,
      dsType: false,
      gfType: false,
      userImg: '',
      myUpLevel: '',
      isShowDownLevel: true
    }
  },
  created() {
    // 获取用户微信基本信息
    var _this = this;
    this.checkInfo()
  },
  methods: {
    checkInfo() {
      var _this = this;
      try {
        if (checkLogin()) {
          _this.userImg = uni.getStorageSync('userImg');
          _this.getUserInfo()
        } else {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      } catch (e) {
        // error
      }
    },
    getUserInfo() {
      var _this = this;
      _this.proxyShow = false;
      uni.request({
        url: config.apiUrl + '/getInfo',
        method: "GET",
        header: {
          'Authorization': uni.getStorageSync('token') //自定义请求头信息
        },
        success: (res) => {
          res = res.data;
          if (200 == res.code) {
            _this.curUser = res.user;
            uni.request({
              url: config.apiUrl + '/system/user/myteams',
              method: "GET",
              header: {
                'Authorization': uni.getStorageSync('token') //自定义请求头信息
              },
              success: (res) => {
                res = res.data;
                if (200 == res.code) {
                  _this.teams = res.data;
                  if (_this.curUser.ctype == '官方') {
                    _this.gfType = true;
                    _this.dsType = false;
                    _this.cyType = false;
                    _this.myUpLevel = '我的上级'
                  } else if (_this.curUser.ctype == '创业') {
                    _this.gfType = false;
                    _this.dsType = false;
                    _this.cyType = true;
                    _this.myUpLevel = '我的上级'
                    _this.isShowDownLevel = false
                  } else if (_this.curUser.ctype == '董事') {
                    _this.gfType = false;
                    _this.dsType = true;
                    _this.cyType = false;
                    _this.myUpLevel = '我的推荐人'
                  }
                } else {
                  console.error('登录失败');
                }
              }
            })
          } else {
            console.error('查询用户信息');
          }
        }
      });
    },
    guanfangClick() {
      this.guanfangExt = !this.guanfangExt;
    },
    chuangyeClick() {
      this.chuangyeExt = !this.chuangyeExt;
    },
    login() {
      uni.navigateTo({
        url: '/pages/login/login?id=zhangsan'
      });
    },
    toggleOverlay() {
      this.showOverlay = !this.showOverlay;
    },
    closed() {
      this.showOverlay = !this.showOverlay;
    },
    backBefore() {
      uni.navigateBack({
        delta: 1 // 默认值是1，表示返回的页面层数
      });
    }
  }
}
</script>

<style>
.content {
  background-color: #FFFFFF;
  height: 100%;
  /* 确保背景色覆盖整个页面 */
  width: 100%;
  /* 确保背景色覆盖整个页面 */
  position: absolute;
}

.top1 {
  height: 40rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
}

.top {
  height: 88rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 32rpx;
  font-weight: 600;
}

.user {
  /**渐变色背景**/
  /** background-image: linear-gradient(to right, #fdd706, #fdb932);**/
  background-image: url("https://zhujinhui.top/minio/zhujinhui/minis/user_back.png");
  display: flex;
  align-items: center;
  width: 700rpx;
  height: 240rpx;
  border-radius: 15rpx;
  /** border: solid 1rpx red;**/
}

.user_img {
  height: 122rpx;
  width: 122rpx;
  margin-left: 28rpx;
  /** border: solid 1rpx red; **/
}

.user_txt {
  height: 122rpx;
  width: 400rpx;
  margin-left: 28rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 34rpx;
  font-weight: 542;
}

.user_i {
  height: 122rpx;
  width: 64rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 40rpx;
}

.user_icon {
  height: 64rpx;
  width: 64rpx;
}

.user_icon_desc {
  font-size: 26rpx;
  font-weight: 800;
}

.team {
  height: 1012rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
}

.my_tuijian {
  /** border: solid 1rpx red;**/
  padding-top: 10rpx;
}

.tuijian_area {
  display: flex;
  align-items: center;
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.tuijian_icon {
  width: 8rpx;
  height: 34rpx;
}

.tuijian_txt {
  font-size: 30rpx;
  font-weight: 600;
  margin-left: 20rpx;
}

.tuijian_info {
  height: 120rpx;
  border-radius: 10rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
  display: flex;
  align-items: center;
}

.up_people {
  width: 76rpx;
  height: 86rpx;
  margin-left: 20rpx;
}

.guan {
  background-color: #FFFFFF;
}

.guanfang {
  width: 700rpx;
  height: 120rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
  border: solid 1rpx #d6d6d6;
  margin-left: 25rpx;
  display: flex;
}

.guanfang_desc {
  width: 700rpx;
  height: 120rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
  border: solid 1rpx #d6d6d6;
  margin-left: 25rpx;
  display: flex;
}

.guanfang_info {
  width: 700rpx;
  height: 120rpx;
  margin-top: 1rpx;
  margin-left: 25rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: solid 1rpx #d6d6d6;
  border-left: solid 1rpx #d6d6d6;
  border-right: solid 1rpx #d6d6d6;
}
</style>
